import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { User, Settings, Heart, ShoppingCart, BookOpen, Calendar, CreditCard, MapPin, Edit, Plus, Camera, LogOut, ChevronRight, Users, Package } from 'lucide-react';
import { useAppStore } from '../stores/appStore';
import { BottomNav } from '../components/BottomNav';

const ProfilePage: React.FC = () => {
  const navigate = useNavigate();
  const { currentUser, logout } = useAppStore();
  const [activeTab, setActiveTab] = useState<'profile' | 'children' | 'orders' | 'favorites'>('profile');
  const [showAddChild, setShowAddChild] = useState(false);
  const [newChild, setNewChild] = useState({ name: '', age: '', gender: 'male' });

  if (!currentUser) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-primary-50 to-accent-50 flex items-center justify-center">
        <div className="text-center">
          <div className="text-6xl mb-4">👤</div>
          <h2 className="text-2xl font-bold text-gray-800 mb-2">请先登录</h2>
          <p className="text-gray-600 mb-4">登录后即可查看个人中心</p>
          <button
            onClick={() => navigate('/login')}
            className="px-6 py-2 bg-primary-500 text-white rounded-full hover:bg-primary-600 transition-colors"
          >
            立即登录
          </button>
        </div>
      </div>
    );
  }

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  const handleAddChild = () => {
    if (newChild.name && newChild.age) {
      // Add child logic would go here
      setShowAddChild(false);
      setNewChild({ name: '', age: '', gender: 'male' });
    }
  };

  const menuItems = [
    { 
      key: 'profile', 
      label: '个人资料', 
      icon: User,
      content: (
        <div className="space-y-6">
          {/* Avatar Section */}
          <div className="bg-white rounded-xl p-6 shadow-sm">
            <div className="flex items-center space-x-4">
              <div className="relative">
                <div className="w-20 h-20 bg-primary-100 rounded-full flex items-center justify-center">
                  {currentUser.avatar ? (
                    <img src={currentUser.avatar} alt="头像" className="w-full h-full rounded-full object-cover" />
                  ) : (
                    <User className="w-10 h-10 text-primary-600" />
                  )}
                </div>
                <button className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full hover:bg-primary-600 transition-colors">
                  <Camera className="w-4 h-4" />
                </button>
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-gray-800">{currentUser.nickname}</h3>
                <p className="text-gray-500">{currentUser.phone || currentUser.wechat || '未绑定联系方式'}</p>
              </div>
            </div>
          </div>

          {/* Contact Info */}
          <div className="bg-white rounded-xl p-6 shadow-sm">
            <h4 className="text-lg font-semibold text-gray-800 mb-4">联系方式</h4>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-gray-600">手机号</span>
                <div className="flex items-center space-x-2">
                  <span className="text-gray-800">{currentUser.phone || '未绑定'}</span>
                  <button className="text-primary-600 hover:text-primary-700">
                    <Edit className="w-4 h-4" />
                  </button>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">微信号</span>
                <div className="flex items-center space-x-2">
                  <span className="text-gray-800">{currentUser.wechat || '未绑定'}</span>
                  <button className="text-primary-600 hover:text-primary-700">
                    <Edit className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Settings */}
          <div className="bg-white rounded-xl p-6 shadow-sm">
            <h4 className="text-lg font-semibold text-gray-800 mb-4">设置</h4>
            <div className="space-y-3">
              <button className="w-full flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
                <div className="flex items-center space-x-3">
                  <Settings className="w-5 h-5 text-gray-600" />
                  <span className="text-gray-800">账号设置</span>
                </div>
                <ChevronRight className="w-4 h-4 text-gray-400" />
              </button>
              <button className="w-full flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
                <div className="flex items-center space-x-3">
                  <MapPin className="w-5 h-5 text-gray-600" />
                  <span className="text-gray-800">地址管理</span>
                </div>
                <ChevronRight className="w-4 h-4 text-gray-400" />
              </button>
            </div>
          </div>
        </div>
      )
    },
    { 
      key: 'children', 
      label: '孩子档案', 
      icon: Users,
      content: (
        <div className="space-y-6">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-semibold text-gray-800">孩子档案</h3>
            <button
              onClick={() => setShowAddChild(true)}
              className="flex items-center px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors"
            >
              <Plus className="w-4 h-4 mr-2" />
              添加孩子
            </button>
          </div>

          {currentUser.children.length === 0 ? (
            <div className="bg-white rounded-xl p-12 shadow-sm text-center">
              <div className="text-6xl mb-4">👶</div>
              <h4 className="text-lg font-semibold text-gray-800 mb-2">还没有孩子档案</h4>
              <p className="text-gray-500 mb-6">添加孩子的基本信息，获得个性化推荐</p>
              <button
                onClick={() => setShowAddChild(true)}
                className="px-6 py-2 bg-primary-500 text-white rounded-full hover:bg-primary-600 transition-colors"
              >
                添加第一个孩子
              </button>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {currentUser.children.map(child => (
                <div key={child.id} className="bg-white rounded-xl p-6 shadow-sm">
                  <div className="flex items-center space-x-4 mb-4">
                    <div className="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center">
                      <span className="text-2xl">{child.gender === 'male' ? '👦' : '👧'}</span>
                    </div>
                    <div className="flex-1">
                      <h4 className="text-lg font-semibold text-gray-800">{child.name}</h4>
                      <p className="text-gray-500">{child.age}岁 · {child.gender === 'male' ? '男' : '女'}</p>
                    </div>
                    <button className="text-primary-600 hover:text-primary-700">
                      <Edit className="w-4 h-4" />
                    </button>
                  </div>
                  
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-600">兴趣爱好</span>
                      <span className="text-gray-800">{child.interests?.join(', ') || '暂无'}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-600">阅读偏好</span>
                      <span className="text-gray-800">{child.readingLevel || '未设置'}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Add Child Modal */}
          {showAddChild && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
              <div className="bg-white rounded-xl p-6 max-w-md w-full mx-4">
                <h4 className="text-lg font-semibold text-gray-800 mb-4">添加孩子档案</h4>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">姓名</label>
                    <input
                      type="text"
                      value={newChild.name}
                      onChange={(e) => setNewChild({...newChild, name: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                      placeholder="请输入孩子姓名"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">年龄</label>
                    <input
                      type="number"
                      value={newChild.age}
                      onChange={(e) => setNewChild({...newChild, age: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                      placeholder="请输入孩子年龄"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">性别</label>
                    <select
                      value={newChild.gender}
                      onChange={(e) => setNewChild({...newChild, gender: e.target.value})}
                      className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                    >
                      <option value="male">男</option>
                      <option value="female">女</option>
                    </select>
                  </div>
                </div>
                <div className="flex space-x-3 mt-6">
                  <button
                    onClick={() => setShowAddChild(false)}
                    className="flex-1 px-4 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    取消
                  </button>
                  <button
                    onClick={handleAddChild}
                    className="flex-1 px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors"
                  >
                    添加
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      )
    },
    { 
      key: 'orders', 
      label: '我的订单', 
      icon: CreditCard,
      content: (
        <div className="space-y-6">
          <h3 className="text-lg font-semibold text-gray-800">我的订单</h3>
          
          <div className="bg-white rounded-xl p-12 shadow-sm text-center">
            <div className="text-6xl mb-4">📦</div>
            <h4 className="text-lg font-semibold text-gray-800 mb-2">暂无订单</h4>
            <p className="text-gray-500 mb-6">您还没有任何订单记录</p>
            <button
              onClick={() => navigate('/books')}
              className="px-6 py-2 bg-primary-500 text-white rounded-full hover:bg-primary-600 transition-colors"
            >
              去购物
            </button>
          </div>
        </div>
      )
    },
    { 
      key: 'orders', 
      label: '我的订单', 
      icon: Package,
      content: (
        <div className="space-y-6">
          <h3 className="text-lg font-semibold text-gray-800">我的订单</h3>
          
          {currentUser.orders.length === 0 ? (
            <div className="bg-white rounded-xl p-12 shadow-sm text-center">
              <div className="text-6xl mb-4">📦</div>
              <h4 className="text-lg font-semibold text-gray-800 mb-2">暂无订单</h4>
              <p className="text-gray-500 mb-6">您还没有任何订单记录</p>
              <button
                onClick={() => navigate('/books')}
                className="px-6 py-2 bg-primary-500 text-white rounded-full hover:bg-primary-600 transition-colors"
              >
                去购物
              </button>
            </div>
          ) : (
            <div className="space-y-4">
              {currentUser.orders.map((order) => (
                <div key={order.id} className="bg-white rounded-xl p-6 shadow-sm">
                  <div className="flex items-center justify-between mb-4">
                    <div className="text-sm text-gray-500">
                      订单号: {order.id}
                    </div>
                    <div className={`px-3 py-1 rounded-full text-sm font-medium ${
                      order.status === 'paid' ? 'bg-green-100 text-green-800' :
                      order.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
                      order.status === 'shipped' ? 'bg-blue-100 text-blue-800' :
                      order.status === 'completed' ? 'bg-gray-100 text-gray-800' :
                      'bg-red-100 text-red-800'
                    }`}>
                      {order.status === 'paid' ? '已支付' :
                       order.status === 'pending' ? '待支付' :
                       order.status === 'shipped' ? '已发货' :
                       order.status === 'completed' ? '已完成' :
                       '已取消'}
                    </div>
                  </div>
                  
                  <div className="space-y-3 mb-4">
                    {order.items.map((item) => (
                      <div key={item.id} className="flex items-center space-x-3">
                        <img
                          src={item.image}
                          alt={item.title}
                          className="w-12 h-12 object-cover rounded-lg"
                        />
                        <div className="flex-1">
                          <h4 className="font-medium text-gray-900">{item.title}</h4>
                          <p className="text-sm text-gray-500">
                            {item.type === 'book' ? '绘本' : '活动'} × {item.quantity}
                          </p>
                        </div>
                        <div className="text-right">
                          <div className="font-medium">¥{(item.price * item.quantity).toFixed(2)}</div>
                          <div className="text-sm text-gray-500">¥{item.price.toFixed(2)}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                  
                  <div className="flex items-center justify-between pt-4 border-t">
                    <div className="text-sm text-gray-500">
                      {new Date(order.createdAt).toLocaleDateString()}
                    </div>
                    <div className="text-lg font-bold text-primary-600">
                      总计: ¥{order.totalAmount.toFixed(2)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )
    },
    { 
      key: 'favorites', 
      label: '我的收藏', 
      icon: Heart,
      content: (
        <div className="space-y-6">
          <h3 className="text-lg font-semibold text-gray-800">我的收藏</h3>
          
          <div className="bg-white rounded-xl p-12 shadow-sm text-center">
            <div className="text-6xl mb-4">❤️</div>
            <h4 className="text-lg font-semibold text-gray-800 mb-2">暂无收藏</h4>
            <p className="text-gray-500 mb-6">收藏您喜欢的绘本和活动</p>
            <button
              onClick={() => navigate('/books')}
              className="px-6 py-2 bg-primary-500 text-white rounded-full hover:bg-primary-600 transition-colors"
            >
              去发现
            </button>
          </div>
        </div>
      )
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-accent-50 pb-20">
      {/* Header */}
      <div className="bg-white shadow-sm sticky top-0 z-40">
        <div className="max-w-6xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-xl font-bold text-gray-800">个人中心</h1>
            <button
              onClick={handleLogout}
              className="flex items-center text-gray-600 hover:text-red-600 transition-colors"
            >
              <LogOut className="w-5 h-5 mr-1" />
              退出
            </button>
          </div>
        </div>
      </div>

      <div className="max-w-6xl mx-auto px-4 py-6">
        {/* Tab Navigation */}
        <div className="bg-white rounded-xl p-2 mb-6 shadow-sm">
          <div className="flex space-x-1 overflow-x-auto">
            {menuItems.map(item => (
              <button
                key={item.key}
                onClick={() => setActiveTab(item.key as any)}
                className={`flex items-center justify-center px-4 py-2 rounded-lg transition-colors whitespace-nowrap ${
                  activeTab === item.key
                    ? 'bg-primary-500 text-white'
                    : 'text-gray-600 hover:bg-gray-100'
                }`}
              >
                <item.icon className="w-4 h-4 mr-2" />
                {item.label}
              </button>
            ))}
          </div>
        </div>

        {/* Tab Content */}
        <div>
          {menuItems.find(item => item.key === activeTab)?.content}
        </div>
      </div>

      <BottomNav />
    </div>
  );
};

export default ProfilePage;